<template>
	<page-wraper>
		<view>
			<wd-tabs v-model="tabWithBadge" @change="handleChange">
				<wd-tab title="生效中"></wd-tab>
				<wd-tab title="已失效"></wd-tab>
			</wd-tabs>
			
			<view style="margin-top: 12px;">
				<wd-status-tip image="search" tip="当前搜索无结果" v-if="list.length == 0" />
				
				<template v-for="(item, index) in list" :key="index">
					<view class="coupon">
						<image :src="`https://www.ytad-pep.com${item.img_url}`" :class="{ 'image-gray': status == 2 }" />
					</view>
				</template>
			</view>
		</view>

		<wd-loadmore :state="state" @reload="load" />
	</page-wraper>
</template>
<script lang="ts" setup>
	import { ref, onUnmounted } from 'vue'
	import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app'

	const state = ref<any>('loading')
	const list = ref<any>([]);
	const pageIndex = ref(1);
	const pageSize = 20;
	const tabWithBadge = ref(0);
	const status = ref(1);

	function handleChange(v) {
		status.value = v.index == 0 ? 1 : 2;
		
		load({ value: '' });
	}

	function load({ value }) {
		state.value = 'loading';

		uni.$http.get(`user/coupon/list?page=${pageIndex.value}&limit=${pageSize}&sort=created&keywords=${value}&status=${status.value}`).then(res => {
			if (pageIndex.value == 1) {
				list.value = res.data.data || [];
			} else {
				list.value = list.value.concat(res.data.data || []);
			}

			if (list.value.length != pageSize) {
				state.value = 'finished';
			}
		})
	}

	function update(item : any, state : number) {
		uni.$http.get(`user/user/agent/${item.id}?enabled=` + state).then(res => {
			if (res.data.code == 0) {
				item.agent = state == 1;
				
				tabWithBadge.value = state == 1 ? 1 : 0;
			}

			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			});
		})
	}

	onLoad(() => {
		load({ value: '' });
	});

	onReachBottom(() => {
		pageIndex.value += 1;

		load({ value: '' });
	})
</script>
<style lang="scss" scoped>
	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
	
	.coupon {
		text-align: center;
		margin-bottom: 10px;
	}
	
	.coupon image {
		width: 80%;
		height: 100px;
	}
	
	.image-gray {
	  filter: grayscale(100%);
	}
</style>